<template>
    <div>
        <a-collapse default-active-key="1" :bordered="false">
            <template #expandIcon="props">
                <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
            </template>
            <a-collapse-panel key="1" :header="i18n('drillDown','下钻')">
                <template #extra>
                    <div @click.stop="">
                        <a-switch size="small" v-model:checked="config.advancedConf.drillDownConfig.isDrillDown"/>
                    </div>
                </template>
                <div v-show="config.advancedConf.drillDownConfig.isDrillDown">
                    <a-button style="width: 100%" @click="add" type="primary" ghost>
                        <rx-icon-show icon="icon-lineVue3_add"/>
                        {{ $ti18('rxList.addBtn', '新增') }}
                    </a-button>
                    <a-collapse default-active-key="0" :bordered="false">
                        <template #expandIcon="props">
                            <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
                        </template>
                        <a-collapse-panel class="drill-collapse" :header="'第'+(index+1)+'级'"
                                          v-for="(item,index) in config.advancedConf.drillDownConfig.configs"
                                          :key="index">
                            <template #extra>
                                <div @click.stop="del(index,true)">
                                    <rx-icon-show style="color: #ff3d3d;font-size:19px;margin-right: 20px"
                                                  icon="icon-lineVue3_delete"></rx-icon-show>
                                </div>

                            </template>
                            <div style="padding: 14px">
                                <a-row>
                                    <a-col>
                                        <a-form-item :label="i18n('showChartType','下钻后展示的图表类型')">
                                            <a-select v-model:value="item.chartType" @change="chartTypeChange(item,index)">
                                                <a-select-option v-for="(filter,index1) in chartFilters" :key="index1"
                                                                 :value="filter.chartType">{{ filter.title }}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <a-col>
                                        <a-form-item :label="i18n('associated','关联字段')+'('+i18n('dimension','维度')+')'">
                                            <a-select style="width: 240px;margin-right: 5px;" v-model:value="item.field">
                                                <a-select-option v-for="(field,index2) in fields[index]" :key="index2"
                                                                 :value="field.tableName+'_'+field.fieldName">
                                                    {{ field.fieldLabel }}
                                                </a-select-option>
                                            </a-select>
                                            <a-button v-show="item.field" @click="setConfig(item,index)">
                                                {{ i18n('configuration', '配置') }}
                                            </a-button>
                                        </a-form-item>
                                    </a-col>
                                    <a-col>
                                        <a-form-item :label="i18n('showType','展示方式')">
                                            <a-select style="width: 150px" v-model:value="item.showType">
                                                <a-select-option value="dialog">{{
                                                        i18n('dialog', '弹窗')
                                                    }}
                                                </a-select-option>
                                                <a-select-option value="current">{{ i18n('current', '当前区域') }}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <span v-if="item.showType=='dialog'" style="margin-left: 20px">
                                        <a-col>
                                            <a-form-item :label="i18n('dialogSize','弹窗大小')">
                                                <a-radio-group v-model:value="item.isMax">
                                                    <a-radio value="YES">{{ i18n("fullScreen", "全屏") }}</a-radio>
                                                    <a-radio value="NO">{{ i18n("custom", "自定义") }}</a-radio>
                                                </a-radio-group>
                                            </a-form-item>

                                        </a-col>
                                        <a-col v-if="item.isMax=='NO'">
                                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                         :label="i18n('width','宽度')">
                                                <a-input-number style="width: 100%" :placeholder="i18n('width','宽度')"
                                                                v-model:value="item.width"
                                                                :min="100" :max="1500"/>
                                            </a-form-item>
                                        </a-col>
                                        <a-col v-if="item.isMax=='NO'">
                                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                         :label="i18n('height','高度')">
                                                <a-input-number style="width: 100%" :placeholder="i18n('height','高度')"
                                                                v-model:value="item.height"
                                                                :min="100" :max="1500"/>
                                            </a-form-item>
                                        </a-col>
                                    </span>
                                </a-row>
                            </div>
                        </a-collapse-panel>
                    </a-collapse>
                </div>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>

<script>
import allComponents from "@/views/modules/design/js/all-components.js";
import DrillDownConfigDialog from "@/views/modules/design/dialog/drill-down-config-dialog.vue";
import {Util} from "@lowcode/jpaas-base-lib";
import defConfig from "@/views/modules/design/js/def-config.js";

export default {
    name: "drill-down-config",
    inject: {
        config: {
            default: () => {
                return {};
            }
        }
    },
    props: ["screenConfig"],
    data() {
        return {
            //所有组件
            componentList: allComponents,
            //组件类型
            chartFilters: [],
            //单个
            defConf: {
                type: "chart",
                key: "",
                parentKey: "",
                chartType: "generalBar",
                field: "",
                config: "",
                showType: "dialog",
                isMax: "YES",
                height: 600,
                width: 800
            },
            //下钻配置
            drillDownConfig: {
                isDrillDown: false,
                configs: []
            },
            //关联字段
            fields: {}
        }
    },
    created() {
        this.fields[0] = this.config.dataSources.dimensions || [];
        if (!this.config.advancedConf.drillDownConfig || !this.config.advancedConf.drillDownConfig.isDrillDown) {
            this.config.advancedConf["drillDownConfig"]=this.drillDownConfig;
        } else {
            this.drillDownConfig = this.config.advancedConf.drillDownConfig;
            this.initFields(this.drillDownConfig.configs);
        }
        this.getChartTypes();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "drillDownConfigLang", key);
        },
        getChartTypes() {
            this.chartFilters = [];
            this.componentList.filter(item1 => {
                if (item1.childList) {
                    item1.childList.filter(item2 => {
                        if (item2.childList) {
                            item2.childList.filter(item3 => {
                                if (item3.type == "chart" && item3.chartType != "customChart" && item3.chartType != "screenChart") {
                                    this.chartFilters.push(item3);
                                }
                            });
                        }
                    });
                } else if (item1.type == "map") {
                    item1.chartType = "map";
                    this.chartFilters.push(item1);
                }
            });
        },
        add() {
            let defConf = JSON.parse(JSON.stringify(this.defConf));
            defConf.key = Util.randomId();
            let flag = true;
            if (this.drillDownConfig.configs.length > 0) {
                let parentConfig = this.drillDownConfig.configs[this.drillDownConfig.configs.length - 1];
                flag = parentConfig.config ? true : false;
                defConf.parentKey = parentConfig.key;
            } else {
                defConf.parentKey = this.config.key;
            }
            if (!flag) {
                this.$message.warning(this.i18n("notConfigured", "上一级未配置！"));
                return;
            }
            this.drillDownConfig.configs.push(defConf);
        },
        delConfig(index) {
            let configs = [];
            for (let i = 0; i < this.drillDownConfig.configs.length; i++) {
                if (i < index) {
                    configs.push(this.drillDownConfig.configs[i]);
                }
            }
            this.drillDownConfig.configs = configs;
        },
        del(index, isShow) {
            let self = this;
            if (!isShow) {
                self.delConfig(index);
                return;
            }
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips', '操作提示'),
                zIndex: 20000,
                content: this.i18n("delTip", "您确定要删除当前及以下记录吗？"),
                okText: this.$ti18('rxForm.ackBtn', '确认'),
                cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                onOk() {
                    self.delConfig(index);
                },
                onCancel() {
                }
            })
        },
        setConfig(item, index) {
            let self = this;
            let config = item.config;
            if (!config) {
                //取组件默认配置
                config = defConfig[item.type || "chart"];
                config.key = item.key || Util.randomId();
                config.title = config.title + config.key;
                config.chartType = item.chartType;
            }
            item.config = config;
            Util.open({
                component: DrillDownConfigDialog,
                curVm: this,
                max: true,
                title: this.i18n("chartConfig", "图表配置"),
                zIndex: 999,
                data: {
                    config: item.config,
                    curComponent: item,
                    screenConfig: this.screenConfig
                }
            }, function (action, data) {
                if (action != 'ok') return;
                item["config"]=data;
                self.fields[index + 1] = data.dataSources.dimensions || [];
            });
        },
        chartTypeChange(item, index) {
            item["config"]="";
            if (item.chartType == "map") {
                item["type"]="map";
            }
            this.del(index + 1, false);
        },
        initFields(configs) {
            for (let i = 0; i < configs.length; i++) {
                if (!configs[i].config) {
                    continue;
                }
                this.fields[i + 1] = configs[i].config.dataSources.dimensions;
            }
        }
    }

}
</script>

<style lang="less">
.drill-collapse {
    border-radius: 4px;
    border: solid 1px #dedede !important;
    margin-top: 16px;

    .ant-collapse-header {
        border-bottom: solid 1px #dedede;
        padding-right: 20px;
    }

    .ant-collapse-arrow {
        left: 10px !important;
    }

    .ant-collapse-header {
        padding-left: 30px !important;
    }
}

</style>
